[Day27] 柚子放學後的網頁生活 - Flask render - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 27

Modern Web

🍐放學後的網頁開發系列第 27 篇

[Day27] 柚子放學後的網頁生活 - Flask render

2019鐵人賽

祐yo

團隊17一起GOGOGO !! 🏊🚴‍🏃

2018-11-11 22:29:55

13819 瀏覽

分享至

上一篇簡介了Flask的優點，以及介紹最基本的用法，但要這麼把他跟網頁結合呢 ~~

Render

先複習上次的hello world

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello')
def hello():
    return 'hello!'

if __name__ == "__main__":
    app.run(port=9000)

接著用

python XXX.py

讓他run起來

確認成功後，我們來動點手腳

建立Templates

我們建立一個Templates資料夾，來放HTML

建議資料夾名為Templates防止出錯哦

待會我們會用Flask內建package來抓這資料夾的資料

建立HTML

建立完Templates資料夾後
在裡面建立HTML檔，Ex : index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FLASK / HTML</title>
  </head>
  <body>
    <h1> FLASK / HTML <h1>
  </body>
</html>

render_template

from flask import Flask, render_template

@app.route('/')
def index():
    return render_template('index.html')

先import render_template進來，
我們在另外用一個route，來 render 剛剛所建立的index.html，有沒有感覺跟Django很像呢 ~

Test

http://127.0.0.1:9000/
看到這個畫面就成功囉 ~

傳入參數

還沒結束，我們來看看怎麼傳值呢

def index():
    title = 'Good Flask'
    return render_template('index.html',title=title)

類似Django的寫法，設title為想傳入的值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FLASK / HTML</title>
  </head>
  <body>
    <h1> {{title}} <h1>
  </body>
</html>

這邊一樣用雙大括號{{}}去接